<template>
    <div>
        <pre>
            <code>
                a元素设置href
            </code>
        </pre>
        <a href="/axios">to axios demo page</a>
        <pre>
            <code>
                nuxt-link :to="{name:'axios'}
            </code>
        </pre>
        <nuxt-link :to="{name:'axios'}">to axios demo page</nuxt-link>
        <pre>
            <code>
                nuxt-link :to="{path:'/axios'}"
            </code>
        </pre>
        <nuxt-link :to="{path:'/axios'}">to axios demo page</nuxt-link>
        <pre>
            <code>
                chagnePage() {
                    this.$router.push('/axios')
                }
            </code>
        </pre>
        <button @click="chagnePage">to axios demo page</button>
    </div>
   
</template>

<script>
export default {
    name: "MyRouter",
    layout: 'test', //默认的使用default.vue
    middleware({stre, route, redirect, params,query,req,res}){
        console.log("check page router")
    },
    //只有在pages目录下的VUE代码才可以使用asyncData，fetch，head三个方法
    asyncData(context) {
        // called every time before loading the component
        return { name: "The data From asyncData()" };
    },
    fetch() {
        // The fetch method is used to fill the store before rendering the page
    },
    head() {
        // Set Meta Tags for this Page
    },
    //Nuxt 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。
    validate({params}){
        return 1;//必须有返回，要不然有了这个方法不返回页面不显示
    },
    components: { },
    data(){},
    computed:{},
    mounted() {},
    methods: {
       chagnePage() {
            console.log(this);
            this.$router.push('/axios')
       }
    },                                                                                                                                                                                                                                                                                                                                    
}
</script>
